{% extends "_layouts/docs.html" %}

{% block content_title %}
<h1>  What's new in Vanilla {{versionMinor}} </h1>
<hr />
{% endblock %}

{% block content %}
<section class="p-section">

<p>When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information.</p>

<table aria-label="What's new in Vanilla {{versionMinor}}">
  <thead>
    <tr>
      <th style="width: 20%">Component</th>
      <th style="width: 15%">Status</th>
      <th style="width: 10%">Version</th>
      <th style="width: 55%">Notes</th>
    </tr>
  </thead>
  <tbody>
    {% for feature in releaseNotes[0].features %}
    <tr>
      <th><a href="{{ feature.url }}">{{ feature.component|safe }}</a></th>
      <td>
        {% if feature.status=="New" %}
        <span class="p-chip--positive is-readonly is-inline">
        {% elif feature.status=="Updated" %}
        <span class="p-chip--information is-readonly is-inline">
        {% elif feature.status=="Deprecated" or feature.status=="Removed" %}
        <span class="p-chip--negative is-readonly is-inline">
        {% elif updatedFeatures[url]=="In Progress" %}
        <span class="p-chip--caution is-readonly is-inline">
        {% endif %}
        {{ feature.status }}</span>
      </td>
      <td>{{ releaseNotes[0].version }}</td>
      <td>{{ feature.notes | safe }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<h2>Previously in Vanilla v4</h2>

<table aria-label="Previously in Vanilla v3">
  <thead>
    <tr>
      <th style="width: 20%">Component</th>
      <th style="width: 15%">Status</th>
      <th style="width: 10%">Version</th>
      <th style="width: 55%">Notes</th>
    </tr>
  </thead>
  <tbody>
    {% for version in releaseNotes[1:] if version.version.startswith("4.") %}
    {% for feature in version.features if feature.status!="Removed" %}
    <tr>
      <th><a href="{{ feature.url }}">{{ feature.component|safe }}</a></th>
      <td>
        {% if feature.status=="New" %}
        <span class="p-chip--positive is-readonly is-inline">
        {% elif feature.status=="Updated" %}
        <span class="p-chip--information is-readonly is-inline">
        {% elif feature.status=="Deprecated" %}
        <span class="p-chip--negative is-readonly is-inline">
        {% elif updatedFeatures[url]=="In Progress" %}
        <span class="p-chip--caution is-readonly is-inline">
        {% endif %}
        {{ feature.status }}</span>
      </td>
      <td>{{ version.version }}</td>
      <td>{{ feature.notes | safe }}</td>
    </tr>

    {% endfor %}
    {% endfor %}

  </tbody>
</table>

To see what changed in Vanilla v3, see the <a href="/docs/changelog-v3">changelog for v3</a> page.

</section>

<h2>Status key</h2>

<div class="row">
  <div class="col-3 u-equal-height">
    <div class="p-card--highlighted">
      <span class="p-chip--positive is-readonly is-inline">New</span>
      <p class="p-card__content">Newly released components, utilities or settings that are safe to use in projects.</p>
    </div>
  </div>
  <div class="col-3 u-equal-height">
    <div class="p-card--highlighted">
      <span class="p-chip--negative is-readonly is-inline">Deprecated</span>
      <p class="p-card__content">These components, utilities or settings are in the process of being removed and should no longer be used in projects.</p>
    </div>
  </div>
  <div class="col-3 u-equal-height">
    <div class="p-card--highlighted">
      <span class="p-chip--caution is-readonly is-inline">In progress</span>
      <p class="p-card__content">Design spec and code implementation are not yet finished.</p>
    </div>
  </div>
  <div class="col-3 u-equal-height">
    <div class="p-card--highlighted">
      <span class="p-chip--information is-readonly is-inline">Updated</span>
      <p class="p-card__content">These are existing components, utilities or settings that have been updated either through design or code.</p>
    </div>
  </div>
  <div class="col-3 u-equal-height">
    <div class="p-card--highlighted">
      <span class="p-chip--negative is-readonly is-inline">Removed</span>
      <p class="p-card__content">These components, variants or utilities have been removed from Vanilla. They should be removed from projects or updated to their new recommended versions.</p>
    </div>
  </div>
</div>
{% endblock %}
